$card-between-distance: 1.25rem
$deck-margin-left: 3rem
$deck-margin-right: 2rem

.display-container
    background-image: url(../image/background.png)
    background-position: center
    background-attachment: fixed
    background-size: 100%
    position: relative
    overflow-y: auto
    height: calc(100vh - 6.25rem)
    margin: 0
    padding-left: 0rem
    padding-right: 0rem


.display-reminder
    padding-top: $deck-margin-right + 1.25rem
    padding-bottom: $deck-margin-right + 0.5rem
    padding-left: $card-between-distance / 2
    padding-right: $card-between-distance / 2
    margin: 0
    max-width: 67.75rem
    position: sticky
    top: 0rem
    z-index: 500

    &.active-sticky
        backdrop-filter: saturate(180%) blur(20px)
        background-color: #FFFFFF90
        border-bottom: 1px solid #000000 16%
        box-shadow: 0 1px 2px #DCDFEF32


.reminder
    $symbol-2radius: 0.875rem

    &-head
        margin-bottom: 0.25rem
        font-size: 0
        position: relative

    &-title
        font-size: 1rem
        font-weight: 600
        color: #000000

    &-symbol
        content: ""
        background-color: #A09DAF
        width: $symbol-2radius
        height: $symbol-2radius
        border-radius: 50vh
        display: inline-block
        position: absolute
        left: -2 * $symbol-2radius
        top: 50%
        transform: translateY(-50%)
        align-self: center

    &-desc
        font-size: 0.75rem
        color: #1D1D1D
        line-height: 1.125rem

